<template>
	<view class="container">
		<!-- 安全区域适配刘海屏 -->
		<view class="safe-area"></view>

		<!-- 页面标题栏 -->
		<view class="header">
			<view class="back-button" @click="goBack">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
			</view>
			<text class="title">根据解释填成语模式</text>
			<view class="placeholder"></view>
		</view>

		<!-- 进度指示器 -->
		<view class="progress-bar">
			<view class="progress-inner" :style="{ width: progressWidth + '%' }"></view>
		</view>
		<view class="progress-text">
			<text>{{ currentIndex + 1 }}/{{ totalCount }}</text>
		</view>

		<!-- 成语卡片 -->
		<view class="idiom-card" :class="{ 'card-animation': showAnimation }">
			<view class="idiom-title">{{ currentIdiom.explanation }}</view>
			<!-- 移除拼音显示 -->
			<!-- <view class="idiom-pinyin">{{ currentIdiom.pinyin }}</view> -->
			<view class="idiom-divider"></view>

			<!-- 默写区域 -->
			<view class="dictation-area">
				<text class="section-label">请填写对应的成语：</text>
				<textarea class="dictation-input" v-model="userAnswer" placeholder="请输入对应的成语..."
					:disabled="isAnswerChecked" :adjust-position="false" :show-confirm-bar="false"
					:cursor-spacing="10"></textarea>
			</view>

			<!-- 答案区域 -->
			<view class="answer-area" v-if="isAnswerChecked">
				<view class="answer-header">
					<text class="answer-label">正确答案：</text>
					<text class="answer-result" :class="{'correct': isCorrect}">{{ isCorrect ? '回答正确' : '回答有误' }}</text>
				</view>
				<text class="answer-content">{{ currentIdiom.idiom }}</text>
				<view class="idiom-section">
					<text class="section-label">用法示例：</text>
					<text class="section-content">{{ currentIdiom.example }}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="action-button check" @click="checkAnswer" v-if="!isAnswerChecked">
				<text>检查答案</text>
			</view>
			<view class="action-button next" @click="nextIdiom" v-if="isAnswerChecked && currentIndex < totalCount - 1">
				<text>下一个</text>
				<u-icon name="arrow-right" color="#ffffff" size="20"></u-icon>
			</view>
		</view>

		<!-- 完成学习按钮 -->
		<view class="finish-button" v-if="isAnswerChecked && currentIndex === totalCount - 1" @click="finishStudy">
			<text>完成学习</text>
		</view>

		<!-- 得分统计 -->
		<view class="score-panel" v-if="isAnswerChecked && currentIndex === totalCount - 1">
			<text class="score-title">本次得分</text>
			<text class="score-value">{{ correctCount }}/{{ totalCount }}</text>
			<text class="score-percent">{{ Math.round(correctCount / totalCount * 100) }}%</text>
		</view>
	</view>
</template>

<script>
	import {
		idiomList
	} from "@/config/api.js";


	export default {
		data() {
			return {
				idiomList: [], // 成语列表
				currentIndex: 0, // 当前成语索引
				totalCount: 0, // 总题目数量
				statusBarHeight: 20, // 默认状态栏高度
				showAnimation: false, // 控制卡片动画
				userAnswer: '', // 用户输入的答案
				isAnswerChecked: false, // 是否已检查答案
				isCorrect: false, // 答案是否正确
				correctCount: 0, // 正确答案数量
				userAnswers: [] // 用户所有答案记录
			}
		},
		computed: {
			// 当前成语
			currentIdiom() {
				return this.idiomList[this.currentIndex] || {
					idiom: '',
					pinyin: '',
					explanation: '',
					example: ''
				};
			},
			// 进度条宽度
			progressWidth() {
				return (this.currentIndex + 1) / this.totalCount * 100;
			}
		},
		async onLoad(options) { // 修改为 async 函数
			// 获取系统信息，适配刘海屏
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight || 20;
				}
			});

			// 获取题目数量
			const count = parseInt(options.count) || 10;
			this.totalCount = count;

			// 获取随机成语列表
			// 调用后端接口获取成语列表
			try {
				let params = `?pageNum=1&pageSize=${count}`;

				const res = await idiomList(params);
				if (res && res.rows) {
					this.idiomList = this.idiomList.concat(res.rows);
				} else {
					console.error('获取成语列表失败:', res);
					uni.showToast({
						title: '获取成语列表失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('调用接口出错:', error);
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
			}

			// 初始化用户答案数组
			this.userAnswers = new Array(count).fill('');
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						uni.redirectTo({
							url: '/pages/idiom/index'
						});
					}
				});
			},

			// 检查答案
			checkAnswer() {
				if (!this.userAnswer.trim()) {
					uni.showToast({
						title: '请输入答案',
						icon: 'none'
					});
					return;
				}

				// 保存用户答案
				this.userAnswers[this.currentIndex] = this.userAnswer;

				// 简单判断答案是否正确
				this.isCorrect = this.userAnswer.trim() === this.currentIdiom.idiom;

				// 更新正确答案计数
				if (this.isCorrect) {
					this.correctCount++;
				}

				// 标记已检查答案
				this.isAnswerChecked = true;
			},

			// 下一个成语
			nextIdiom() {
				if (this.currentIndex < this.totalCount - 1) {
					this.showAnimation = true;
					setTimeout(() => {
						this.currentIndex++;
						this.userAnswer = this.userAnswers[this.currentIndex] || '';
						this.isAnswerChecked = false;
						this.isCorrect = false;
						this.showAnimation = false;
					}, 300);
				}
			},

			// 完成学习
			finishStudy() {
				uni.showModal({
					title: '学习完成',
					content: `恭喜您完成了${this.totalCount}个成语的默写！正确率：${Math.round(this.correctCount / this.totalCount * 100)}%`,
					confirmText: '返回首页',
					cancelText: '再学一次',
					success: (res) => {
						if (res.confirm) {
							// 返回首页
							uni.redirectTo({
								url: '/pages/idiom/index'
							});
						} else {
							// 重新开始
							this.resetStudy();
						}
					}
				});
			},

			// 重置学习
			resetStudy() {
				// 重新获取随机成语列表
				// 这里需要确保 getRandomIdioms 函数存在
				this.idiomList = getRandomIdioms(this.totalCount);

				// 重置状态
				this.currentIndex = 0;
				this.userAnswer = '';
				this.isAnswerChecked = false;
				this.isCorrect = false;
				this.correctCount = 0;
				this.userAnswers = new Array(this.totalCount).fill('');
			}
		}
	}
</script>

<style>
	/* 全局容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 30rpx 50rpx;
		align-items: center;
	}

	/* 安全区域适配刘海屏 */
	.safe-area {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #ffffff;
	}

	/* 页面标题栏样式 */
	.header {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 30rpx;
		margin: 0 -30rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.back-button {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.placeholder {
		width: 60rpx;
	}

	/* 进度条样式 */
	.progress-bar {
		width: 100%;
		height: 10rpx;
		background-color: #e0e0e0;
		border-radius: 5rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
	}

	.progress-inner {
		height: 100%;
		background-color: #4A89DC;
		border-radius: 5rpx;
		transition: width 0.3s;
	}

	.progress-text {
		width: 100%;
		text-align: right;
		margin-bottom: 30rpx;
	}

	.progress-text text {
		font-size: 24rpx;
		color: #666666;
	}

	/* 成语卡片样式 */
	.idiom-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
		box-sizing: border-box;
		transition: all 0.3s;
	}

	.card-animation {
		opacity: 0;
		transform: translateY(20rpx);
	}

	.idiom-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.idiom-pinyin {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.idiom-divider {
		width: 100%;
		height: 2rpx;
		background-color: #f0f0f0;
		margin-bottom: 30rpx;
	}

	/* 默写区域样式 */
	.dictation-area {
		margin-bottom: 30rpx;
	}

	.dictation-input {
		width: 100%;
		height: 200rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	/* 答案区域样式 */
	.answer-area {
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 2rpx dashed #e0e0e0;
	}

	.answer-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.answer-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.answer-result {
		font-size: 28rpx;
		font-weight: bold;
		color: #FF6B6B;
		margin-left: 10rpx;
	}

	.answer-result.correct {
		color: #48CFAD;
	}

	.answer-content {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.idiom-section {
		margin-top: 20rpx;
	}

	.section-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.section-content {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
	}

	/* 操作按钮样式 */
	.action-buttons {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.action-button {
		width: 100%;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.action-button text {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		margin: 0 10rpx;
	}

	.check {
		background-color: #5D9CEC;
	}

	.next {
		background-color: #4A89DC;
	}

	/* 完成学习按钮 */
	.finish-button {
		width: 100%;
		height: 90rpx;
		background-color: #48CFAD;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 10rpx rgba(72, 207, 173, 0.3);
		margin-bottom: 30rpx;
	}

	.finish-button text {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
	}

	/* 得分统计 */
	.score-panel {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.score-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.score-value {
		font-size: 60rpx;
		font-weight: bold;
		color: #4A89DC;
		margin-bottom: 10rpx;
	}

	.score-percent {
		font-size: 36rpx;
		color: #666666;
	}
</style>